<template>
    <div>
        <nav-bar style="  width: 100%; position: fixed; z-index: 999;"></nav-bar>
        <template v-if="isHome">
            <b-carousel id="carousel-1" :interval="4000" indicators background="#ababab" img-width="1024"
                img-height="480" style="text-shadow: 1px 1px 2px #333;">

                <b-carousel-slide>
                    <template #img>
                        <img class="d-block img-fluid w-100" src="../../assets/images/carousel1.jpg" alt="image slot"
                            style="height: 720px;">
                    </template>
                    <div style="position: relative; margin-left: 50%; margin-top: -35%;">
                        <vue-typed-js :strings="typedStrings" :loop="true" :backDelay="1000" :typeSpeed="100"
                            :backSpeed="50">
                            <h1> <span class="typing"></span></h1>
                        </vue-typed-js>
                    </div>
                </b-carousel-slide>

            </b-carousel>
            <!-- 介绍-->
            <home-intro></home-intro>

        </template>
        <Footer></Footer>
    </div>
</template>



<script>
    import $ from 'jquery'
    import {
        VueTypedJs
    } from "vue-typed-js";
    import "bootstrap/dist/css/bootstrap.css";
    import "bootstrap-vue/dist/bootstrap-vue.css";
    import Footer from './common/footer.vue'
    import HomeIntro from "./common/homeIntro.vue"
    import navBar from "./common/navBar"
    export default {
        name: "Index",
        components: {
            VueTypedJs,
            Footer,
            HomeIntro,
            navBar
        },
        data() {
            return {
                isHome: true,

                typedStrings: ["Welcome to the website", '欢迎进入本网站'],

            }
        },
        mounted() {
            this.watchScroll()
        },
        methods: {
            watchScroll() {
                let header = $('nav')
                let range = 200
                header.css({
                    'background-color': "transparent"
                })
                $(window).on('scroll', function () {
                    let scrollTop = $(this).scrollTop();

                    if (scrollTop <= 600) {
                        header.css({
                            'background-color': "transparent"
                        })
                    } else if (scrollTop > 700) {
                        header.css({

                            'background-color': "#3e70a1"
                        })
                    }
                })
            }
        },
    }
</script>
<style lang="scss" scoped>
    * {
        box-sizing: border-box;

    }

    a {
        text-decoration: none;
        color: #333;
    }

    *::before,
    *.after {
        box-sizing: border-box;
    }

    nav.navbar {
        transition: backgroundColor .5s;
        position: fixed;
        width: 100%;
        margin: 0 auto;
        top: 0;
        z-index: 3;
        background-color: #3e70a1;

        .navbar-brand {
            padding: 0 10vw;
            color: #fff
        }

        .navbar-collapse {
            padding-left: 20vw;

            ul li {
                margin: 0 1vw;

                a {
                    transition: all .5s;
                    color: #fff;
                }
            }


            ul li a:hover {
                transform: scale(1.2);
                background-color: #fff;
                border-radius: 5%;
                color: #3e70a1;
            }


        }

    }
</style>